<template>
  <div>
    <el-row>
      <!-- <el-col :span="6">
        <div class="header">
          <el-form ref="form" :model="pages" label-width="100px">
            <el-form-item label="按名称筛选：">
              <el-input v-model="pages.name" @input="addInput" />
            </el-form-item>
          </el-form>
        </div>
      </el-col> -->
      <el-col :span="18">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="addList"
        >添加记录</el-button>
      </el-col>
    </el-row>
    <el-table :data="queryList" stripe border style="width: 100%" height="45vh">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="植物名称" />
      <el-table-column prop="label" label="名称种类" />
      <el-table-column prop="umbrella" label="所属类别" />
      <!-- 缺少字段 -->
      <!-- <el-table-column
        prop="data"
        label="形态特征"
      /> -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-link type="primary" @click="editList(row)">修改</el-link>
          <el-link type="danger" @click="deleList(row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="pages.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pages.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加对话框 -->
    <el-dialog
      title="修改宿主植物"
      :visible.sync="dialogVisible"
      width="40%"
      @close="addClose"
    >
      <el-form
        ref="addRef"
        :rules="addrules"
        :model="addFrom"
        label-width="110px"
      >
        <el-form-item label="植物名称:" prop="name">
          <el-input v-model="addFrom.name" />
        </el-form-item>
        <el-form-item label="所属统称:" prop="umbrella">
          <el-input
            v-model="addFrom.umbrella"
            placeholder="可用多个用英文逗号拼接"
          />
        </el-form-item>
        <el-form-item label="是否为具体种:" prop="classify">
          <el-select v-model="addFrom.classify">
            <el-option
              v-for="(item, index) in classify"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="添加宿主植物"
      :visible.sync="editVisible"
      width="40%"
      @close="editClose"
    >
      <el-form
        ref="editRef"
        :rules="editrules"
        :model="editFrom"
        label-width="110px"
      >
        <el-form-item label="植物名称:" prop="name">
          <el-input v-model="editFrom.name" />
        </el-form-item>
        <el-form-item label="所属统称:" prop="umbrella">
          <el-input
            v-model="editFrom.umbrella"
            placeholder="可用多个用英文逗号拼接"
          />
        </el-form-item>
        <el-form-item label="是否为具体种:" prop="classify">
          <el-select v-model="editFrom.classify">
            <el-option
              v-for="(item, index) in classify"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editition">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { PlantsApi, addplantApi, deleplantApi } from '@/api/Bioinformatics'
export default {
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      // 表格数据
      pages: {
        page: 1,
        listRows: 10,
        name: ''
      },
      // 主体数据
      queryList: [],
      // 分页
      total: null,
      // 对话框控制
      dialogVisible: false,
      // 修改对话框
      editVisible: false,
      // 添加表单
      addFrom: {
        // id
        id: 0,
        // 类别 1:统称,2:具体种
        classify: null,
        // 名称
        name: '',
        // 所属统称 多个用英文逗号拼接
        umbrella: ''
      },
      // 修改表单
      editFrom: {
        // id
        id: 0,
        // 类别 1:统称,2:具体种
        classify: null,
        // 名称
        name: '',
        // 所属统称 多个用英文逗号拼接
        umbrella: ''
      },
      // 添加表单验证
      addrules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        umbrella: [{ required: true, message: '请输入', trigger: 'blur' }],
        classify: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 修改表单验证
      editrules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        umbrella: [{ required: true, message: '请输入', trigger: 'blur' }],
        classify: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      // 统称数据
      classify: [
        { label: '统称', value: 1 },
        { label: '具体种', value: 2 }
      ]
    }
  },
  created() {
    this.getPlantsApi()
  },
  methods: {
    // 表格主体数据
    async getPlantsApi() {
      const res = await PlantsApi(this.pages)
      this.queryList = res.data
      this.queryList.forEach((item) => {
        if (item.classify === 1) {
          item.label = '统称'
        } else {
          item.label = '具体种'
        }
      })
      this.total = res.count - 0
      console.log(res)
    },
    // 分页逻辑
    handleSizeChange(newSize) {
      this.pages.listRows = newSize
      this.getPlantsApi()
    },
    handleCurrentChange(newNUm) {
      this.pages.page = newNUm
      this.getPlantsApi()
    },
    // 筛选
    // addInput() {
    //   this.getPlantsApi()
    // },
    // 添加按钮
    addList() {
      this.addFrom.id = 0
      this.dialogVisible = true
    },
    // 修改按钮
    editList(row) {
      this.editVisible = true
      this.editFrom.id = row.id
      this.editFrom.classify = row.classify
      this.editFrom.name = row.name
      this.editFrom.umbrella = row.umbrella
    },
    // 确定添加/修改
    confirmTheAddition() {
      this.$refs.addRef.validate(async(valid) => {
        if (!valid) return false
        await addplantApi(this.addFrom)
        this.dialogVisible = false
        this.getPlantsApi()
        this.$message.success('添加成功！')
      })
    },
    editition() {
      this.$refs.editRef.validate(async(valid) => {
        if (!valid) return false
        await addplantApi(this.editFrom)
        this.editVisible = false
        this.getPlantsApi()
        this.$message.success('修改成功！')
      })
    },
    //
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await deleplantApi({ id: row.id })
      this.getPlantsApi()
    },
    // 对话框关闭事件
    addClose() {
      this.addFrom = {}
    },
    editClose() {
      this.addFrom = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 320px;
}
.el-link {
  margin-right: 10px;
}
.el-select {
  width: 100%;
}
</style>
